<template>
  <div class="top-bar">
    <div class="top-bar__right">
      <div>
        <div style="font-size: 24px" @click="onCollapse()">
          <i :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
        </div>
      </div>
      <div>2</div>
    </div>
  </div>
</template>
 
<script>
import { mapGetters } from "vuex";

export default {
  name: "Top",
  data() {
    return {
      msg: "Welcome to your vueName",
    };
  },
  computed: {
    ...mapGetters(["isCollapse"]),
  },
  methods: {
    onCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
  },
};
</script>
 
<style scoped lang ="less">
.top-bar {
}
.top-bar__left {
  float: left;
}
.top-bar__right {
  background-color: #ebf1f6;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>